<template>
<div class='page-box'>
	<div class="page-title"></div>
	<div class="page-main">
		<cesiumViews :thermodynamicData="thermodynamicData" v-if="thermodynamicData"></cesiumViews>
		<div class="control" style="positon:relative;">
			<div class="project-recommend-filtrate">
				<el-form :model="projectRecommendForm" label-position="left">
						<el-form-item label="快速推荐">
								<el-checkbox-group v-model="projectRecommendForm.quickRecommendation">
										<el-checkbox v-for="item of quickRecommendationCheckBoxList" :label="item.label" style="color:#D7DDE2;"
																							:name="item.value"/>
								</el-checkbox-group>
								<div class="reset-filtrate-btn" @click="resetFiltrate">重置筛选条件</div>
						</el-form-item>
						<el-form-item label="标签推荐" class="tag-form-item">
								<el-select
												class="multiple-select tag-multiple-select"
												v-model="projectRecommendForm.tagRecommendation"
												multiple
												size="small"
												placeholder="请选择"
								>
										<el-option
														v-for="item in tagRecommendationOptions"
														:key="item.value"
														:label="item.label"
														:value="item.value"
														class="custom-option"
										/>
								</el-select>
								<div class="accord-condition-type">
										<span>满足</span>
										<el-select
														v-model="projectRecommendForm.accordCondition"
														size="small"
														placeholder="请选择"
										>
												<el-option
																v-for="item in [
																				{
																						id: 1,
																						value: 1,
																						label: '任一条件'
																				},
																				{
																						id: 2,
																						value: 2,
																						label: '所有条件'
																				},
																]"
																:key="item.value"
																:label="item.label"
																:value="item.value"
																class="custom-option"
												/>
										</el-select>
								</div>
						</el-form-item>
						<el-form-item label="区域推荐">
							<selectCity @myCascader="myCascader"></selectCity>
						</el-form-item>
						<el-form-item label="开发商推荐">
								<el-select
												class="multiple-select"
												v-model="projectRecommendForm.developersRecommendation"
												multiple
												size="small"
												placeholder="请选择"
								>
										<el-option
														v-for="item in developersRecommendationOptions"
														:key="item.value"
														:label="item.label"
														:value="item.value"
														class="custom-option"
										/>
								</el-select>
						</el-form-item>
						<el-form-item class="multiple-condition-list" label="推荐条件">
								<div class="multiple-condition-list-item"
													v-for="(item, index) of projectRecommendForm.recommendationConditionsList" :key="index">
				
										<span class="unitPrice" style="color:#D7DDE2;">单价</span>
										<el-slider v-model="item.rangeValue" range :disabled="!item.conditionValue"
																					size="small" :min="item.min" :max="item.max"/>
										<div class="slider-range-input">
												<el-input type="number" v-model="item.rangeValue[0]" placeholder="请输入" :minlength="item.min"
																						:maxlength="item.rangeValue[1] ? item.rangeValue[1] - 1 : item.max - 1"/>
												<span style="color:#D7DDE2">&nbsp;~&nbsp;</span>
												<el-input type="number" v-model="item.rangeValue[1]" placeholder="请输入"
																						:minlength="item.rangeValue[0] ? item.rangeValue[0] + 1 : item.min + 1"
																						:maxlength="item.max"/>
												<span style="color:#D7DDE2">{{ item.unit }}</span>
										</div>
								</div>
						</el-form-item>
						<el-form-item label=" " class="btns-form-item">
								<el-button type="primary" @click="startRecommend()" >开始推荐</el-button>
						</el-form-item>
				</el-form>
				</div>
				<div class="recommend-table-list-module">
						<tableList :tableData="tableData"></tableList>
				</div>
				<div class="pag" >
					<span class="pag-click" @click="lastPage()">上一页</span>
					<div  class="pag-width">
						{{	tableData.current }}
					</div>
					<span class="pag-click" @click="nextPage()">下一页</span>
					<span class="total-page">共{{ tableData.pages }}页</span>
				</div>
		</div>
	</div>
	<div class="shade"></div>
</div>
</template>
<script setup>
import { ref,reactive, onMounted,onUnmounted} from 'vue';
import cesiumViews from '@/components/public/cesiumView1.vue';
import selectCity from '@/components/propertyLife/selectCity.vue';
import tableList from '@/components/propertyLife/tableList.vue';
import {
	developerList,
	recommendProjects,
	selectGardenStatistics,
} from "@/api/propertyLife";
import { collapseItemProps } from 'element-plus';

// 初始化数据
const params = reactive({
	radio: 1,
})
const optionValue = ref(null)
const selectOptions = [
  {
    value: 'Option1',
    label: '任一条件',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
]
const projectRecommendForm = ref({
  quickRecommendation: [], // 快速推荐
  tagRecommendation: [], // 标签推荐
  areaRecommendation: [], // 区域推荐
  developersRecommendation: [], // 开发商推荐
  accordCondition: 1, // 满足条件类型
  recommendationConditionsList: [ // 推荐条件list
    {
      conditionValue: '单价',
      rangeValue: [0, 50000],
      min: 0,
      max: 50000,
      unit: '元'
    }
  ],
		adcodeList:[],//code列表
})
const quickRecommendationCheckBoxList = ref([ // 项目推荐-筛选-快速推荐多选list
  {
    id: 1,
    label: '学区',
    value: '学区'
  },
  {
    id: 2,
    label: '交通',
    value: '交通'
  },
  {
    id: 3,
    label: '保值',
    value: '交通'
  }
])
const tagRecommendationOptions = ref([ // 项目推荐-筛选-标签推荐select-list
  {
    label: '商圈', value: '商圈',
  },
  {
    label: '地铁', value: '地铁',
  },
  {
    label: '无工厂', value: '无工厂',
  },
  {
    label: '一河两岸', value: '一河两岸',
  },
  {
    label: '重点学区', value: '重点学区',
  },
  {
    label: '商圈医疗', value: '商圈医疗',
  }
])
const areaOptions = ref([]) // 项目推荐-筛选-区域推荐select-list
const developersRecommendationOptions = ref([]) // 项目推荐-筛选-开发商推荐select-list
const recommendationConditionsSelectList = ref([ // 项目推荐-筛选-推荐条件select-list
  {
    id: 1,
    label: '单价',
    value: '单价',
    min: 0,
    max: 50000,
    unit: '元',
    disabled: true
  },
  {
    id: 2,
    label: '楼层',
    value: '楼层',
    min: 0,
    max: 50,
    unit: '层',
    disabled: false
  },
  {
    id: 3,
    label: '面积',
    value: '面积',
    min: 0,
    max: 500,
    unit: '㎡',
    disabled: false
  },
  {
    id: 4,
    label: '楼龄',
    value: '楼龄',
    min: 0,
    max: 100,
    unit: '年',
    disabled: false
  },
  {
    id: 5,
    label: '总价',
    value: '总价',
    min: 0,
    max: 1000,
    unit: '万元',
    disabled: false
  }
])
const recommendTableListData = ref([]) // 推荐列表tablelist
const recommendColumnData = ref([]) // 推荐列表columnlist
const recommendTableInfo = ref({ // 推荐列表-分页-table信息
  total: 0,
  currentPage: 1
})
const pageSize = ref(5)
const pageNum = ref(1)
const tableData = ref({
	pages:[]
})
const thermodynamicData = ref(null)//热力图数据

// 开发商列表
const developerListGet = async() => {
	let { data } = await developerList({});
	developersRecommendationOptions.value = data?.map(x => {
        return {
          label: x,
          value: x
        }
 })
}
// 区域列表
const initAreasList = (cityCode) => { // 获取当前市区list
  getSupplyDemandGetRegion({adcode: cityCode}).then(res => {
    let resData = res?.data
    if (resData?.length) {
      resData.shift();
      areaOptions.value = resData
    }
  }).catch(error => {
    console.log(error);
  })
}
// 项目列表
const projectRecommendFiltrateonSubmit = async() => { // 项目推荐-筛选
		let { data } = await recommendProjects({
			isAllCriteriaMet:projectRecommendForm.value.accordCondition,
			isSchool:projectRecommendForm.value.quickRecommendation.includes('学区')?'是':null,
			isTransportConvenient:projectRecommendForm.value.quickRecommendation.includes('交通')?'是':null,
			isValueMaintained:projectRecommendForm.value.quickRecommendation.includes('保值')?'是':null,
			tagList:projectRecommendForm.value.tagRecommendation,
			adcodeList:projectRecommendForm.value.adcodeList,
			developerList:projectRecommendForm.value.developersRecommendation,
			priceMin:projectRecommendForm.value.recommendationConditionsList[0].rangeValue[0],
			priceMax:projectRecommendForm.value.recommendationConditionsList[0].rangeValue[1],
			pageSize:pageSize.value,
			pageNum:pageNum.value,
		});
		tableData.value = data
}
// 热力图数据
const thermodynamicGet = async() => {
	let { data } = await selectGardenStatistics({
			isAllCriteriaMet:projectRecommendForm.value.accordCondition,
			isSchool:projectRecommendForm.value.quickRecommendation.includes('学区')?'是':null,
			isTransportConvenient:projectRecommendForm.value.quickRecommendation.includes('交通')?'是':null,
			isValueMaintained:projectRecommendForm.value.quickRecommendation.includes('保值')?'是':null,
			tagList:projectRecommendForm.value.tagRecommendation,
			adcodeList:projectRecommendForm.value.adcodeList,
			developerList:projectRecommendForm.value.developersRecommendation,
			priceMin:projectRecommendForm.value.recommendationConditionsList[0].rangeValue[0],
			priceMax:projectRecommendForm.value.recommendationConditionsList[0].rangeValue[1],
			pageSize:pageSize.value,
			pageNum:pageNum.value,
		});
		thermodynamicData.value = data
}
// 开始推荐
const startRecommend = () => {
 pageSize.value = 5
	pageNum.value = 1
	projectRecommendFiltrateonSubmit()
	thermodynamicGet()
}
//获取地图code
const myCascader = (val) => {
	projectRecommendForm.value.adcodeList = val
}
//上一页
const lastPage = () => {
		if(pageNum.value > 1){
			pageNum.value = pageNum.value - 1
			projectRecommendFiltrateonSubmit()
			thermodynamicGet()
		}
}
//下一页
const nextPage = () => {
	if(pageNum.value < tableData.value.pages){
		pageNum.value = pageNum.value + 1
		projectRecommendFiltrateonSubmit()
		thermodynamicGet()
	}
}
onMounted(() => {
	developerListGet()
	projectRecommendFiltrateonSubmit()
	thermodynamicGet()
});
</script>
<style scoped lang='less'>
.shade{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	pointer-events: none;
	background: url('../../assets/img/propertyLife/shadowBg.png');
	background-size:100% 100%;
	background-repeat: no-repeat;
	z-index:3;
}
.page-box{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	.page-title{
		position: fixed;
		top: 0px;
		width: 100vw;
		height: 85px;
  background-image: url('../../assets/img/propertyLife/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
		opacity: 1;
		z-index: 4;
	}
	.page-main{
		width: 100vw;
		height: 100vh;
		.control{
			width: 650px;
			height: 640px;
			background: url('../../assets/img/propertyLife/controlBg.png');
			background-size: 100% 100%;
  	background-repeat: no-repeat;
			position: absolute;
			top: 165px;
			left: 42px;
			padding-top: 55px;
			padding-right: 10px;
			padding-left: 10px;
			// padding-bottom: 100px;
			box-sizing: border-box;
			z-index: 4;
		}
	}
}

.project-recommend-filtrate {
			/deep/ .el-form-item:nth-of-type(1) {
					.el-form-item__content {
							flex-wrap: nowrap;
							justify-content: space-between;

							.el-checkbox-group {
									.el-checkbox {
											color: white;

											.el-checkbox__input {
													.el-checkbox__inner {
															border: 1px solid #1FB7FF;
															background-color: transparent;
													}
											}

											.el-checkbox__input.is-checked {
													.el-checkbox__inner {
															background-color: #409EFF;
													}
											}
									}
							}
					}
			}

			/deep/ .el-form-item {
					margin-bottom: 5px;

					.el-form-item__label {
							color: white;
							width: 90px;
					}

					.project-recommend-filtrate-name-search {
							position: relative;

							.project-recommend-filtrate-name-search-autocomplete {
									width: 200px;
									margin-left: 0px;

									.el-input__wrapper {
											min-height: 20px;
											height: 20px;
											background: #001A35;
											box-shadow: inset 0px 0px 8px 0px #3D7FFF;
											border-radius: 10px;
											border: 1px solid #03DBFF;
											padding-right: 35px;

											.el-input__inner {
													color: white;
											}
											.el-input__suffix .el-icon {
													color: white;
											}
									}
							}

							.project-name-search-btn {
									position: absolute;
									right: 8px;
									top: 0;
									color: #00FBFF;
									font-size: 12px;
									cursor: pointer;
							}
					}

					.reset-filtrate-btn {
							color: #00FBFF;
							cursor: pointer;
					}

					.multiple-select {
							width: 66%;
							position: relative;

							.el-select__wrapper {
									background: #001A35;
									box-shadow: inset 0px 0px 8px 0px #3D7FFF;
									border-radius: 8px;
									border: 1px solid #03DBFF;
									height: 24px;
									min-height: 24px;
									width: 100%;

									.el-tag {
											height: 18px;
									}

									.el-select__suffix {
											.el-icon {
													color: #00FBFF;
											}
									}

									.el-select__placeholder {
											color: white;
									}
							}
					}

					.multiple-select:after {
							content: '';
							position: absolute;
							top: 50%;
							right: -30px;
							width: 30px;
							height: 1px;
							background-color: #00f9fd;
					}

					.tag-multiple-select.multiple-select:after {
							width: 60px;
							right: -60px;
					}

					.tag-multiple-select.multiple-select:before {
							content: '';
							position: absolute;
							top: 12px;
							right: -30px;
							width: 1px;
							height: 74px;
							background-color: #00f9fd;
					}

					.accord-condition-type {
							display: flex;
							align-items: center;

							> span {
									white-space: nowrap;
									color: #00FBFF;
									font-size: 12px;
							}

							.el-select {
									width: 90px;
									margin: 0 5px;

									.el-select__wrapper {
											background: #001A35;
											box-shadow: inset 0px 0px 8px 0px #3D7FFF;
											border-radius: 8px;
											border: 1px solid #03DBFF;

											.el-select__placeholder {
													color: white;
											}
									}
							}
					}
			}

			/deep/ .tag-form-item .el-form-item__content {
					display: flex;
					justify-content: space-between;
			}
	}
/deep/ .multiple-condition-list {
		.el-form-item__content {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.multiple-condition-list-item {
						width: 100%;
						display: flex;
						align-items: center;
						position: relative;

						.multiple-condition-list-item-delete {
								position: absolute;
								left: -20px;
						}

						.el-select {
								min-width: 80px;
								width: 80px;
								margin-right: 20px;

								.el-select__wrapper {
										background: #001A35;
										box-shadow: inset 0px 0px 8px 0px #3D7FFF;
										border-radius: 8px;
										border: 1px solid #03DBFF;

										.el-select__placeholder {
												color: white;
										}
								}
						}

						.el-slider {
								width: 40%;
								.el-slider__runway {
										background-color: #06598D;

										.el-slider__bar {
												background-color: #1FB7FF;
										}
								}

								.el-slider__button {
										width: 10px;
										height: 10px;
										border: 0;
								}
						}

						.slider-range-input {
								display: flex;
								align-items: center;
								margin-left: 20px;

								.el-input__wrapper {
										background: #001A35;
										box-shadow: inset 0px 0px 8px 0px #3D7FFF;
										border-radius: 8px;
										border: 1px solid #03DBFF;

										.el-input__inner {
												width: 55px;
												height: 15px;
												font-size: 12px;
												color: white;
										}
								}

								> span:last-child {
										margin-left: 5px;
										white-space: nowrap;
								}
						}
				}
		}
}
/deep/ .btns-form-item {
		.el-button {
				height: 24px;
				border-radius: 8px;
				border: 0;
		}

		.el-button:last-child {
				background: linear-gradient(135deg, rgba(94, 158, 234, 0.15) 0%, #2F62CD 50%, #3065D1 100%);
				box-shadow: inset 0px 0px 8px 0px #3D7FFF;
		}
}
::v-deep .multiple-condition-list .el-form-item__content .multiple-condition-list-item .slider-range-input > span:last-child{
	color: #ffffff;
}
.unitPrice{
	margin-right: 20px;
	width: 64px;
	height: 20px;
	background: #001A35;
	box-shadow: inset 0px 0px 8px 0px #3D7FFF;
	border-radius: 8px;
	border: 1px solid #03DBFF;
	font-size: 14px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content:center;
}
.pag{
	position: absolute;
	bottom: 20px;
	display: flex;
	justify-content: center;
	width: 100%;
	span{
		color: #ffffff;
	}
	.pag-width{
		padding: 0px 10px;
		white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
		color: white; /* Text color */
		background-image: linear-gradient(to right, white 70%, rgba(255, 255, 255, 0) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent; /* Ensure compatibility with Safari */
		text-fill-color: transparent;
	}
	.pag-index{
		margin: 0px 10px;
	}
	.pag-click{
		text-decoration: underline;
	}
	.pag-click:hover{
		cursor: pointer;
	}
	.pag-click:first-child{
		margin-right: 0px;
	}
	.pag-click:last-child{
		margin-left: 10px;
	}
	.total-page{
		margin-left: 20px;
	}
}
.custom-option{
	color:#ffffff;
}
.custom-option{
	background: #1C5BCC;
}
.custom-option:hover{
	background:#368CF2;
}
</style>
